<template>
  <div>
    <div>Top250</div>
    <hr>
    <!-- 状态获取用法 -->
    <div>{{$store.state.will.info}}</div>
    <div>{{$store.state.top.topInfo}}</div>
    <div>{{info}}</div>
    <div>{{topInfo}}</div>
    <!-- --------------------------------------------- -->
    <div>映射的Getters:{{myInfo}}</div>
    <!-- 不可以按照如下的方式来写：和state的原始写法不同 -->
    <!-- <div>原始的写法：{{$store.getters.will.myInfo}}</div> -->
    <!-- 需要按照如下的方式来写 -->
    <div>原始的写法：{{$store.getters['will/myInfo']}}</div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  name: 'TopMovie',
  computed: {
    ...mapState('will', ['info']),
    ...mapState('top', ['topInfo']),
    ...mapGetters('will', ['myInfo'])
  },
  methods: {
    ...mapActions('will', ['showInfo']),
    ...mapActions('top', ['showTopInfo'])
  },
  created () {
    // 用原始的方式获取getters
    // const myInfo = this.$store.getters['will/myInfo']
    // console.log(myInfo)

    // ---------------------------------------------

    // 触发will模块的action
    this.$store.dispatch('will/showInfo', 'coniqiwa')
    // 触发top模块的action
    this.$store.dispatch('top/showTopInfo', 'coniqiwa')

    // 基于映射方式触发
    this.showInfo('alligatogozayimasi')
    this.showTopInfo('hello')
  }
}
</script>
